<!--  -->
<template>
  <div class="list-panel">
    <div style=" width: 100%">
      <el-button size="mini" style="float: left;" type="primary" @click="handleAdd()"
        >新增</el-button
      >
      <el-button size="mini" style="float: left;"  type="success">导出</el-button>
      <el-input
        v-model="search"
        size="mini"
        style="width: 30%;height：200px; float: right"
        placeholder="输入关键字搜索"
      />
    </div>
    <el-table
      border
      highlight-current-row
      @current-change="rowCurrentChange"
      v-if="data.page"
      :data="filter()"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="index"> </el-table-column>
      <el-table-column
        show-overflow-tooltip
        width="200"
        v-for="(value, index) in data.page.columnNames"
        :label="value"
        :prop="value"
        :key="index"
      >
      </el-table-column>

      <el-table-column width="150" fixed="right" align="right">
        <!-- <template slot="header" slot-scope="scope">
          <el-input
            :scope="scope"
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"
          />
        </template> -->
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="warning"
            @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        background
        @size-change="sizeChangeEvent"
        @current-change="currentPageChangeEvent"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :pager-count="pagerCount"
        :current-page="currentPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>
    </div>

    <el-dialog title="MarkDown编辑器" :visible.sync="dialogVisible">
      <component
        :is="activeDialogName"
        :rowData="rowData"
        :optionType="optionType"
        @editCommit="dialogVisible = false"
        @editCancel="dialogVisible = false"
      ></component>
      <!-- <div slot="footer" class="dialog-footer">
      </div> -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "List",
  props: ["url"],
  data() {
    return {
      rowData: {},
      optionType: "", //edit或者add
      search: "",
      pageSizes: [10, 20, 30, 40],
      pagerCount: 5,
      currentPage: 1,
      pageSize: 10,
      totalCount: 0,
      data: {},
      dialogVisible: false,
      activeDialogName: {},
    };
  },

  methods: {
    filter() {
      if (!this.search == "") {
        let list = this.data.page["list"].filter((data) => {
          let keys = Object.keys(data).filter((key) => {
            if (
              data[key] != null &&
              (data[key] + "").toLowerCase().includes(this.search.toLowerCase())
            ) {
              return true;
            }
          });
          if (keys.length != 0) {
            return true;
          }
        });
        return list;
      }
      return this.data.page["list"];
    },
    getActivePanel(menuName) {
      return this.$store.getters.getActivePanelName + menuName;
    },
    handleAdd() {
      this.rowData = {};
      this.optionType = "add";
      this.activeDialogName = () => import("../" + this.getActivePanel("Add"));

      if (this.dialogVisible) this.dialogVisible = false;
      else this.dialogVisible = true;
    },

    handleEdit(index, row) {
      console.log("handleEdit");
      this.rowData = row;
      this.optionType = "edit";
      this.activeDialogName = () => import("../" + this.getActivePanel("Edit"));
      if (this.dialogVisible) this.dialogVisible = false;
      else this.dialogVisible = true;
      console.log("../" + this.getActivePanel("Edit"));
      console.log(index, row);
    },
    handleDelete(index, row) {
      let menu = this.$store.getters.getActiveMenu;
      let menuList = this.$store.getters.getClickMenu;
      let children = menuList[menu].children;
      console.log(index, row);
      children.forEach((element) => {
        console.log("children.forEach");
        console.log(element);
        if (element.name == "删除") {
          this.$http({
            url: element.url,
            method: "post",
            data: [row.id],
          }).then((data) => {
            this.getPageData(this.url, this.currentPage, this.pageSize);
            alert(data.data);
          });
        }
      });
      console.log(index, row);
    },
    getPageData(url, currentPage, pageSize) {
      this.$http({
        url: url,
        method: "post",
        params: {
          page: currentPage,
          limit: pageSize,
        },
      }).then((data) => {
        console.log("AdminList data:");
        console.log(data.data);
        this.data = data.data;
        this.currentPage = data.data.page.currPage;
        this.pageSize = data.data.page.pageSize;
        this.totalCount = data.data.page.totalCount;
      });
    },
    sizeChangeEvent(currentPageSize) {
      console.log("sizeChangeEvent");
      console.log(currentPageSize);
      this.pageSize = currentPageSize;
      this.getPageData(this.url, this.currentPage, this.pageSize);
    },
    currentPageChangeEvent(currentPage) {
      console.log("currentPageChangeEvent");
      this.currentPage = currentPage;
      this.getPageData(this.url, this.currentPage, this.pageSize);
    },
    rowCurrentChange(currentRow, oldCurrentRow) {
      console.log("rowCurrentChange");
      console.log(currentRow);
      console.log(oldCurrentRow);
    },
  },
  created() {
    this.$bus.$on("articleAddSuccess", (data) => {
      this.getPageData(this.url, this.currentPage, this.pageSize);
      this.dialogVisible = !data;
    });
  },
  beforeMount() {
    console.log(" LIst  beforeMount");
    this.getPageData(this.url, this.currentPage, this.pageSize);
  },
};
</script>
<style >
.list-panel {
  height: 100%;
  padding: 50px;
  background-color: rgba(0, 0, 0, 0.1);
}
.pagination {
  margin: 20px;
}
</style>